<template>
  <div>
    <el-dialog v-model="openFlag" title="盘点" width="500" append-to-body>

      <el-alert type="error" style="margin-bottom: 20px;">
        创建盘点单后将会冻结盘点仓库，所有入、出库单都不能做，直到盘点完成
      </el-alert>

      <el-form ref="baseForm" :rules="baseFormRules" :model="baseFormData" label-width="80">
        <el-form-item label="名称" prop="title">
          <el-input v-model="baseFormData.title" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div>盘点范围</div>

      <el-form :model="rangeFormData" label-width="80">
        <el-row>
          <el-col :span="12">
            <el-form-item label="类别" prop="title">
              <category-select v-model="rangeFormData.categoryId" placeholder="请输入"></category-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库" prop="warehouseId">
              <warehouse-select v-model="rangeFormData.warehouseId" placeholder="请输入"></warehouse-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="close">取 消</el-button>
        </el-row>

      </div>
    </el-dialog>

  </div>
</template>

<script setup>

import api from "./api.js";
import CategorySelect from "@/components/Consume/CategorySelect.vue";
import WarehouseSelect from "@/components/Consume/WarehouseSelect.vue";

const emit = defineEmits(['emit']);

const openFlag = ref(false);

const baseForm = ref();

const baseFormData = reactive({
  name: null
});

const baseFormRules = {
  title: {
    required: true,
    message: '不能为空', trigger: "blur"
  }
}

const rangeFormData = reactive({
  categoryId: null,
  warehouseId: null,
})

function open() {
  openFlag.value = true;
}

function close() {
  openFlag.value = false;
}

function save() {

  baseForm.value.validate(valid => {
    if (valid) {
      const params = {
        baseForm: {...baseFormData},
        rangeForm: {...rangeFormData}
      };
      api.save(params).then(response => {
        emit("sub");
        close();
      });
    }
  })

}

defineExpose({
  open
});

</script>

